<template>
    <div class="x-property">
        <x-drop-down :menus="attrs">
            <template #refrence>
                <slot></slot>
            </template>
            <template #content>
                <template v-for="item in attrs" :key="item.label">
                    <x-drop-sub-item v-if="item.children" :icon="item.icon" :label="item.label" :devided="item.devided"
                        :group="item.group" :events="item.events">
                        <template v-for="xitem in item.children" :key="xitem.label">
                            <x-drop-item v-if="!xitem.children" :label="xitem.label" :icon="xitem.icon"
                                :group="xitem.group" :devided="xitem.devided" :events="xitem.events">
                                <x-cmpnt-render v-if="xitem.cmpnt" :cmpnt="xitem.cmpnt" :data="xitem.data" />
                            </x-drop-item>
                            <x-drop-sub-item v-else :label="xitem.label" :icon="xitem.icon" :devided="xitem.devided"
                                :group="xitem.group" :events="xitem.events">
                                <template v-for="yitem in xitem.children" :key="yitem.label">
                                    <x-drop-item v-if="!yitem.children" :label="yitem.label" :icon="yitem.icon"
                                        :group="yitem.group" :devided="yitem.devided" :events="yitem.events">
                                        <x-cmpnt-render v-if="yitem.cmpnt" :cmpnt="yitem.cmpnt" :data="yitem.data" />
                                    </x-drop-item>
                                    <x-drop-sub-item v-else :label="yitem.label" :icon="yitem.icon"
                                        :devided="yitem.devided" :events="yitem.events">
                                        <template v-for="zitem in yitem.children" :key="zitem.label">
                                            <x-drop-item v-if="!zitem.children" :label="zitem.label" :icon="zitem.icon"
                                                :group="zitem.group" :devided="zitem.devided" :events="zitem.events">
                                                <x-cmpnt-render v-if="zitem.cmpnt" :cmpnt="zitem.cmpnt"
                                                    :data="zitem.data" />
                                            </x-drop-item>
                                        </template>
                                    </x-drop-sub-item>
                                </template>
                            </x-drop-sub-item>
                        </template>
                    </x-drop-sub-item>
                    <x-drop-item v-else :label="item.label" :icon="item.icon" :group="item.group"
                        :devided="item.devided" :events="item.events">
                        <x-cmpnt-render v-if="item.cmpnt" :cmpnt="item.cmpnt" :data="item.data" />
                    </x-drop-item>
                </template>
            </template>
        </x-drop-down>
    </div>
</template>
<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { ICmpnt } from 'xcore/cmpnt/types';
import { setCmpntProperties, IPropertyItem } from "xcore/designer";

// 定义组件的 Props 类型
interface Props {
    fields: any[];
    cmpnt: ICmpnt;
    bizData: Record<string, any>;
}

// 使用 defineProps 定义 Props
const props = defineProps<Props>();
// 使用 ref 创建响应式数据
const attrs = ref<IPropertyItem[]>([]);

setCmpntProperties(attrs.value, props.cmpnt, props.bizData);

</script>

<style scoped>
.x-property-drop-menu {
    min-width: 160px;
}
</style>